<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>jsonp解决跨域</h1>
    <button id="btn">提交请求</button>
    <script>
        // jsonp解决跨域原理：
        // ajax请求由于同源策略的限制 不能进行跨域 但是浏览器请求（浏览器请求都是get请求）可以进行跨域
        // script,img,a链接可以进行跨域
        // 所以利用script的src来解决跨域的问题

        // 给btn按钮绑定一个点击事件 点击的时候创建一个script标签 给script标签添加一个src属性 利用script的src属性进行跨域 src中的地址是服务器的地址
        // 此时 只能浏览器可以发送请求给服务器 服务器可以接收到请求 但是浏览器接收不到服务器发送的响应
        // 为了解决该问题 可以封装一个函数 利用查询字符串 给浏览器和服务器进行关联 服务器根据查询字符串来获取到该回调函数 
        
        // function callback(data){
        //     console.log('返回参数：',data);
        // }
        
        // const btn = document.getElementById('btn')
        //  btn.onclick = function(){
        //  let script = document.createElement('script')
        //  script.src = 'http://127.0.0.1:4545/user?userId=001&cb=callback'
         
        //  document.body.appendChild(script)
         
        // }

            function callback(data){
                console.log("返回参数：",data);
            }

        const btn = document.querySelector('#btn')
        btn.onclick = function(){
            const Oscript = document.createElement('script')
            Oscript.src='http://127.0.0.1:4545/user?userId=001&cb=callback'
            document.body.appendChild(Oscript)
        }


        
    </script>
</body>
</html>